<template>
	<view class="wrap">
		<view class="label">
			<view class="text">{{ title }}</view>
			<view class="line"></view>
		</view>
		<!-- 更多按钮 -->
		<view class="more" v-if="type == 1" @click="onClickMore">
			<view class="text">{{ moreText }}</view>
			<u-icon name="arrow-right" size="12"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: '标题'
		},
		moreText: {
			type: String,
			default: '更多'
		},
		//是否显示右侧的更多 1显示 0不显示
		type: {
			type: Number,
			default: 1
		}
	},
	methods: {
		onClickMore() {
			this.$emit('more')
			
		},
	},
};
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	justify-content: space-between;
	color: #333;
}

.label {
	position: relative;
	display: inline-block;
	.text {
		position: relative;
		z-index: 2;
		margin: 0 10upx;
		font-size: 30upx;
		font-weight: bold;
		line-height: 64upx;
	}
	.line {
		width: 100%;
		height: 10upx;
		background-color: #C2DDFF;
		position: absolute;
		bottom: 16upx;
		border-radius: 30px;
		z-index: 1;
	}
}

.more {
	display: flex;
	align-items: center;
	font-size: 24upx;
}
</style>
